

import { Image, ActionBar, Toast } from 'react-vant';
import { ArrowLeft, Ellipsis, ChatO, CartO, Fail } from '@react-vant/icons';
import { useEffect, useState, useContext } from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import TopTitleBar from '../../components/TopTitleBar';
import axios from '../../utils/axios';
import { baseURL } from '../../utils/contants';
import { myContext } from '../../context';

import "./index.css"
const ProductDetailsPage = () => {
    const navigate = useNavigate();
    const { shoppingCartConent, updateShoppingCartConent } = useContext(myContext);
    const [productDetails, setProductDetails] = useState({})
    const {
        state: {
            goodsId
        }
    } = useLocation();

    // 拿 googsId 去 axios：
    const getProductionDetails = () => {
        axios.get(`/api/v1/goods/detail/${goodsId}`).then(res => {
            if (res.data.message === 'SUCCESS') {
                setProductDetails(res.data.data);
            }
        })
    }

    const addToShoppingCart = () => {
        axios.post('/api/v1/shop-cart', {
            goodsId,
            goodsCount: 1,
        }).then(addShopCart => {

            if (addShopCart.data.message === 'SUCCESS') {
                // shoppingCartConent + 1); 这个 应该是 后端 返回的，而不是 你自己去加的！！！
                // shoppingCartConent 这个应该在 加载页面的时候获取回来，或者是 放在 redux 里面！！
                // axios 加入购物车，并且在返回成功之后， 1，弹窗： 添加成功！  1，加入购物车的那个图标，也要 +1
                Toast.success('添加成功');
                getShoppingCartCount();
            } else {
                Toast({
                    message: addShopCart.data.message,
                    icon: (
                        <Fail></Fail>
                    )
                });
            }
        })
    }

    const getShoppingCartCount = () => {
        axios.get('/api/v1/shop-cart').then(res => {
            if (res.data.message === 'SUCCESS') {
                //如果是 SUCCESS， 就说明 aixos 成功，
                // 应该在 axios里面去设置一个相应拦截？？？？
                updateShoppingCartConent(res.data.data)
            }
        })
    }
    useEffect(() => {
        getProductionDetails();
        getShoppingCartCount();
    }, [])
    return (
        <div className="productDetailsPage">
            <TopTitleBar
                leftIcon={
                    <ArrowLeft onClick={() => navigate(-1)} />
                }
                intermediateContentText='商品详情'
                rightIcon={
                    <Ellipsis />
                }
            />
            <div className="mainContent">
                <div className="productionCoverImg">
                    {/* img 主图 */}
                    <Image src={String(productDetails.goodsCoverImg).startsWith('https://') ? productDetails.goodsCoverImg : baseURL + productDetails.goodsCoverImg} />

                </div>
                <div className="goodsName">
                    {productDetails.goodsName}
                </div>
                <div className="postTips">
                    免邮费 顺丰快递
                </div>
                <div className="sellingPrice">
                    ¥ {productDetails.sellingPrice}
                </div>
                <ul className="introductionText">
                    <li>概述</li>
                    <li>参数</li>
                    <li>安装服务</li>
                    <li>常见问题</li>
                </ul>
                <div className="goodsDetailContent" dangerouslySetInnerHTML={{ __html: productDetails.goodsDetailContent }} />

            </div>
            <div className="afterBar">
                <ActionBar>
                    <ActionBar.Icon icon={<ChatO />} text='客服' />
                    <ActionBar.Icon icon={<CartO />} badge={{ content: shoppingCartConent.length > 0 && shoppingCartConent.length }} text='购物车' onClick={() => navigate('/shoppingCart')} />
                    <ActionBar.Button color='#67d6d6' type='warning' text='加入购物车' onClick={addToShoppingCart} />
                    <ActionBar.Button color='#098e8e' type='danger' text='立即购买' />
                </ActionBar>
            </div>
        </div>
    )
}

export default ProductDetailsPage;